<template>
    <div class="course_book_config">
        <el-dialog width="800px" title="配置教材" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <!--
            <el-dialog
                width="30%"
                title="选择教材"
                :visible.sync="innerDialogState"
                :close-on-click-modal="false"
                append-to-body>

                <el-select v-model="courseBookselectArray" multiple placeholder="请选择">
                    <el-option
                    v-for="item in courseBookselect.dataList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="batchAddRow" size="small">确 定</el-button>
                    <el-button @click="innerDialogState = false" size="small">关 闭</el-button>
                </div>
            </el-dialog>
            -->
            <el-form :inline="true" :model="courseBook" class="demo-form-inline" :rules="rules" ref='form'>
                <el-form-item label="选择教材：" prop="selectArray">
                    <el-select clearable filterable v-model="courseBook.selectArray" size="mini" multiple filterable placeholder="请选择">
                        <el-option
                        v-for="item in courseBookList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量：" prop="number">
                    <el-input-number clearable v-model="courseBook.number" :min="1" :max="999"></el-input-number>
                </el-form-item>
                <div style="float:right;">
                    <el-button type="primary" @click="addRow" size="small">新增</el-button>
                </div>
            </el-form>


            <table class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-transition">
                <thead>
                    <tr>
                        <th class="is-center">教材名称</th>
                        <th class="is-center">数量</th>
                        <th class="is-center">操作</th>
                    </tr>
                </thead>

                <tbody>
                    <tr v-for="(item, index) in tableDataList">
                        <td>
                            <!-- <el-input v-model="item.courseBookName" disabled></el-input> -->
                            {{item.courseBookName}}
                        </td>
                        <td>
                            <el-input-number v-model="item.number" :min="1" :max="999">
                            </el-input-number>
                        </td>
                        <td>
                            <a href="javascript:void(0);" @click="deleteRow(index)" class="link_txt">
                                删除
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                state: false,
                trainPlanId: null,
                planCourseId: null,
                // innerDialogState:false,
                /* courseBook: {
                    trainPlanId: null,
                    planCourseId: null,
                    courseBookId: null,    // 教材主键id
                    number: null,  // 课时
                }, */
                // 需要保存的数据集合
                tableDataList:[],
                // 教材下拉框数据对象
                courseBookList: [],
                // 教材实体对象
                courseBook:{
                    selectArray: [],    //多选集合
                    number: 1,
                },
                rules:{
                    selectArray: [
                        { required: true, message: '请至少选择一个教材', trigger: 'change', type: 'array' }
                    ],
                    number: [
                         { required: true, message: '请选择院系', trigger: 'blur', type: 'number' }
                    ],
                }

            }
        },
        created() {
            // 查询教材列表
            this.getCourseBookList();
        },
        mounted() {},
        watch: {
        },
        computed: {
        },
        methods: {
            // 打开模态框
            showDialog(trainPlanId, planCourseId) {
                // 设置需要更新的主键id
                this.trainPlanId = trainPlanId;
                this.planCourseId = planCourseId;
                // 获取配置教材基本数据
                this.getCourseBookInfo();
                // 设置模态框状态
                this.state = true;
                // 清空选中数组
                this.$nextTick(function(){
                    this.$refs['form'].resetFields();
                })
            },
            showInnerDialog(){
                this.innerDialogState = true;
                this.courseBookselectArray = [];
            },
            // 获取配置教材信息
            getCourseBookInfo(){
                let vm = this;
                vm.axios.get(api.trainPlan.courseBook.query,{
                    params:{
                        trainPlanId: this.trainPlanId,
                        planCourseId: this.planCourseId,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.tableDataList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取下拉教材列表集合
            getCourseBookList() {
                let vm = this;
                vm.axios.get(api.courseBook.queryAll).then((response) => {
                    if (response.data.success) {
                        this.courseBookList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 新增行
            addRow(){
                let vm = this;
                vm.$refs['form'].validate((valid) => {
                    if(valid){
                        // 遍历多选
                        for(let selectItemId of vm.courseBook.selectArray){
                            let model = {
                                trainPlanId: vm.trainPlanId,
                                planCourseId: vm.planCourseId,
                                courseBookId: selectItemId,    // 教材主键id
                                courseBookName: _.find(vm.courseBookList, {id: selectItemId}).name,
                                number: vm.courseBook.number,  // 课时
                            }
                            // 如果table为空
                            if(vm.tableDataList.length == 0){
                                vm.tableDataList.unshift(model);
                                continue;
                            }
                            // 验重逻辑
                            vm.tableDataList.every((item, index)=>{
                                if(selectItemId === item.courseBookId){
                                    item.number += vm.courseBook.number;
                                /*   vm.$confirm('当前选择教材已经存在，是否叠加数量？', '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'info'
                                    }).then(() => {

                                    }, () => {}) */
                                    return false;
                                }else if(index+1 == vm.tableDataList.length){
                                    vm.tableDataList.unshift(model)
                                }
                                return true;
                            })
                        }
                    }
                })


                // 设置数据
                //this.courseBook.courseBookId = this.courseBookselect.defaultSelect ;
                //this.courseBookList.push(JSON.parse(JSON.stringify(this.courseBook)));
            },
            // 删除一行
            deleteRow(index){
                this.tableDataList.splice(index,1);
            },
            // 提交
            submit() {
                let vm = this;
                if(_.isEmpty(vm.tableDataList)){
                    vm.$message({
                        type: 'info',
                        message: '请先新增数据！',
                    })
                    return;
                }
                // 异步请求
                vm.axios.post(api.trainPlan.courseBook.add, vm.tableDataList)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                type: 'success',
                                message: response.data.msg,
                            });
                            // 关闭弹出窗口
                            vm.state = false;
                            // 刷新table
                            vm.$parent.$refs.trainPlanTable.$emit('vuetable:refresh');
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                })
            },
        },
    };
</script>
<style scoped>
.el-select{ width: 350px; }
.el-input-number{ width: 188px; }
</style>